<template>
  <div>
    <div id="marketing-img"></div>

    <h1>传统企业面临经营渠道的痛点</h1>

    <div style="width: 1200px; height: 380px; margin: 0 auto; ">
      <div class="marketing-div">
        <img width="120px" height="120px" src="https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIMur7tcFKICpzsECMIAPOIAK!200x200.jpg" />
        <h4>错单漏单拖单</h4>
        <p>
          采用电话、QQ、传<br>
          真等方式下单，容<br>
          易出现错单、漏<br>
          单、拖单等现象，<br>
          客户满意度下降
        </p>
      </div>
      <div class="marketing-div">
        <img width="120px" height="120px" src="https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIMf26dcFKPCpgSYwgA84gAo!200x200.jpg" />
        <h4>价格体系混乱</h4>
        <p>
          渠道客户价格体系<br>
          多，不同客户结算<br>
          价格不同，人脑记<br>
          忆容易出错，核价<br>
          占用太多时间
        </p>
      </div>
      <div class="marketing-div">
        <img width="120px" height="120px" src="	https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIOf669UFKK7GzP0BMIAPOIEK!200x200.jpg" />
        <h4>促销通知困难</h4>
        <p>
          新品、促销等活动<br>
          靠业务员传达，效<br>
          率低、不及时、信<br>
          息损耗大，没有和<br>
          客户建立链接
        </p>
      </div>
      <div class="marketing-div">
        <img width="120px" height="120px" src="	https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIL6R7NUFKNP7p-4CMIAPOIAK!200x200.jpg" />
        <h4>客户对账痛苦</h4>
        <p>
          和渠道客户对账麻<br>
          烦，需要销售人<br>
          员、财务、客户三<br>
          方协作，效率低、<br>
          易出错、周期长
        </p>
      </div>
      <div class="marketing-div">
        <img width="120px" height="120px" src="https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIKmj59kFKKzfpegCMIAPOIEK!200x200.jpg" />
        <h4>客户关怀不足</h4>
        <p>
          很多客户长期不下<br>
          单也不清楚，缺乏<br>
          对老客户的服务和<br>
          关怀，造成客户不<br>
          活跃甚至流失
        </p>
      </div>
    </div>

    <div id="marketing-body">
      <h1 style="color: white;">系统介绍</h1>
      <p style="color: white; font-size: 18px; position: relative; top: -20px; line-height: 1.5;">B2B订货系统，专注解决传统订货方式混乱、新品推广难、客户黏度不高等问题<br>
        让企业轻松管客户、管订单、管销售、管资金、做促销，<br>
        颠覆传统销售及管理模式，提高企业工作效率，降低运营成本</p>
    </div>

    <h1>一站式订货流程</h1>
    <p>客户自主订货或业务员代客下单，不仅能够减少企业内勤人员成本，也能够让业务员覆盖不到的客户随时下单</p>

    <div style="width: 1200px; margin: 0 auto;">
      <div class="marketing-div-a"><img width="100%" src="../../../assets/APP.png"/></div>
      <div class="marketing-div-a"><img width="100%" src="../../../assets/PC.png"/></div>
      <div class="marketing-div-a"><img width="100%" src="../../../assets/WX.png"/></div>
    </div>

    <h1>语音、APP消息、短信、微信等多种提醒方式</h1>
    <p>新品、促销、订单与资金变动，都能即时收到通知，再也不怕错过重要业务信息</p>
    <el-image style="margin: 60px auto;" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg77aT8wUo5sqx1gMw9wo4jQY!700x700.png.webp"></el-image>
    <h1>支持多种付款方式，加快资金回笼</h1>
    <p>线上支付（支付宝、微信、银联）、信用支付、线下支付、余额支付、货到付款满足多种场景业务</p>
    <el-image style="margin: 60px auto;" src="	https://22159555.s21i.faiusr.com/4/ABUIABAEGAAghrqT8wUolKSn1AQwxg042wI!700x700.png.webp"></el-image>
    <h1>企业经营概况</h1>
    <p>老板通过手机随时随地了解企业的销售、库存和资金等经营概况，运筹帷幄占领先机</p>
    <el-image style="margin: 50px auto;" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgp72T8wUopL_qugUwvg443wU!1000x1000.png.webp"></el-image>
    <h1>会员系统功能</h1>
    <el-image src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg8baT8wUoiNKWkAcw8Aw4pQQ!900x900.png.webp"></el-image>
    <h1>营销活动</h1>
    <el-image src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg_b_T8wUo_IrCxAUw0g04qAY!900x900.png.webp"></el-image>

    <div id="medication-div-footer">
      <el-button style="font-size: 18px;width: 180px; height: 55px; margin-top: 80px"
                 @click="dialogFormVisible = true">马上体验
      </el-button>
    </div>

    <el-dialog title="请填写您的信息" :visible.sync="dialogFormVisible">
      <span style="color: #666666; font-size: 12px;">亲爱的朋友，为更好的为您服务，请您填写以下信息或致电400-86-18580，我们的工作人员会尽快与您联系！</span>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机" prop="customerPhone">
          <el-input v-model="ruleForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="customerName">
          <el-input v-model="ruleForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="行业" prop="customerIndustry">
          <el-input v-model="ruleForm.customerIndustry"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="warning" @click="dialogFormVisible = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "MarketingView",
  data() {
    return {
      /*新增客户*/
      dialogFormVisible: false,
      ruleForm: {
        customerPhone: '',
        customerName: '',
        customerIndustry: '',
      },
      rules: {
        customerPhone: [
          {required: true, message: '请输入您的手机号', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        customerName: [
          {required: true, message: '请输入您的姓名', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ],
        customerIndustry: [
          {required: true, message: '请输入您所在行业', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ]
      },
      formLabelWidth: '100px'


    }
  },

  methods:{
    /*添加*/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/customer/insert';
          let jsonData = {
            customerPhone: this.ruleForm.customerPhone,
            customerName: this.ruleForm.customerName,
            customerIndustry: this.ruleForm.customerIndustry
          };
          this.axios({
            method: 'post',
            url: url,
            headers: { 'Content-Type': 'application/json' },
            data: JSON.stringify(jsonData)       //将参数转为json格式
          }).then((response) =>{
            let jsonResult = response.data;
            if (jsonResult.code == 200){
              this.$message({
                message:'提交成功!',
                type:'sucess'
              });
              this.resetForm(formName);
              this.dialogFormVisible = false;
            }else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
}
</script>

<style scoped>
#medication-div-footer {
  margin-top: 50px;
  height: 200px;
  background-image: url('../../../assets/footer.jpg')
}

.marketing-div-a {
  display: inline-block;
  margin: 50px 60px;
  width: 213px;
  height: 56px;
}
#marketing-body {
  padding-top: 5px;
  height: 257px;
  background-size: cover;
  background-position: center center;
  background-image: url('../../../assets/marketingBody.png');
}
.marketing-div > p {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}
.marketing-div > h4 {
  color: #666666;
  font-size: 14px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.marketing-div > img {
  border-radius: 100%;
}
.marketing-div {
  margin: 50px 15px;
  width: 180px;
  display: inline-block;
}

#marketing-img {
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-image: url('https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg5qaT8wUovOzjrAEwgA84rAI.png.webp');
}

h1 {
  margin: 50px auto;
  color: #666666;
  font-size: 30px;
}
p {
  color: #666666;
  font-size: 14px;
}


</style>